<template>
	<div class="header">
		<img :src="info.avatar" width="50px" height="50px" alt="" />
		<div>
			<p>
				<span>{{ info.name }}</span>
				<img v-if="info.gender === 1" src="../../../../../assets/boy.png" width="25px" alt="" />
				<img v-else-if="info.gender === 2" src="../../../../../assets/girl.png" width="25px" alt="" />
			</p>
			<p>
				<span>备注：</span>
				<span>{{ info.customer_type === 1 ? '微信用户' : info.customer_type === 2 ? '企业微信用户' : '' }}</span>
			</p>
		</div>
		<p>{{ info.follow_status }}</p>
	</div>
</template>

<script>
export default {
	data() {
		return {
			info: {}
		};
	},
	created() {
		this.getInfo();
	},
	methods: {
		getInfo() {
			this.info = JSON.parse(sessionStorage.getItem('external_info'));
		}
	}
};
</script>

<style lang="less" scoped>
.header {
	font-size: 14px;
	padding: 10px 15px 0px;
	display: flex;
	align-items: center;
	p {
		margin: 0;
	}
	> div {
		display: flex;
		flex-direction: column;
		justify-content: space-between;
		height: 50px;
		margin: 0 10px;
		> p {
			display: flex;
			align-items: center;
		}
	}
	> p {
		margin-left: auto;
		padding: 5px 15px;
		background-color: #ffb355;
		border-radius: 5px;
		line-height: 1.7;
		color: #fff;
	}
}
</style>
